<template>
  <div class="technicDetail">
    <div class="title">
      <i class="iconfont iconbtn_nav_back icon" @click="back"></i>
    </div>
    <div class="content">
      <div class="left">
        <div>{{ detailData.title }}</div>
        <div class="bottom">
          <span>{{ detailData.created_at | formatTime }}</span>
          <span class="mid">
            <i class="iconfont iconicon_liulanliang"></i>
            {{ detailData.read }}
          </span>

          <i
            v-if="this.detailData.star === 0"
            class="iconfont iconbtn_dianzan_small_nor iconred"
            @click="zan"
          ></i>
          <i
            v-else
            class="iconfont iconbtn_dianzan_small_nor iconred"
            style="color:red"
            @click="diszan"
          ></i>

          <!-- <span v-if="this.detailData.star === 0">{{ detailData.star }}</span>
          <span v-else>{{ detailData.star }}</span> -->

          <span>1</span>
          <span>0</span>
          <!-- <span v-else> {{ num }}</span> -->
        </div>
      </div>
      <div class="text" v-html="detailData.content"></div>
    </div>
  </div>
</template>

<script>
import { articlesTechnicDetail, starArticle } from '@/api/api.js'
// import { articlesTechnicDetail } from '@/api/api.js'
export default {
  created () {
    this.getDetail()
  },
  data () {
    return {
      detailData: '',
      // 点赞数
      num: []
    }
  },
  methods: {
    back () {
      this.$router.go(-1)
    },
    async getDetail () {
      const res = await articlesTechnicDetail(this.$route.params.id)
      this.detailData = res.data
      console.log(res)
      if (this.detailData.star === 0) {
      }
    },
    // 点赞
    async zan () {
      const res = await starArticle({
        article: this.$route.params.id
      })
      this.num = 1
      console.log(res)
    },
    async diszan () {
      const res = await starArticle({
        article: this.$route.params.id
      })
      this.num = 0
      console.log(res)
    }
  }
}
</script>

<style lang="less" scoped>
.technicDetail {
  .title {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
    .icon {
      font-size: 40px;
    }
  }
  .content {
    padding: 10px;
    .left {
      font-size: 16px;
      .bottom {
        margin-top: 5px;
        font-size: 12px;
        color: #b4b4bd;
        .mid {
          margin: 0 18px 0 210px;
        }
        // .iconred:active {
        //   color: red;
        // }
      }
    }
    .text {
      font-size: 16px;
      margin-top: 50px;
      /deep/ img {
        width: 100%;
      }
    }
  }
}
</style>
